<template>
  <div id="PositionInfo">
    <el-row class="Title">
      <el-col :span="12" :offset="2">
        <div class="Breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path:'/'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path:'/position '}">职位检索</el-breadcrumb-item>
            <el-breadcrumb-item>职位详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="position-name">
          <h1>{{positionData.job_title}}</h1>
          <p>
            <span>{{positionData.salary}}</span>
            {{forworkExperience(positionData)}} / {{formatterendEdu(positionData)}}
          </p>
          <p class="address">{{positionData.work_space}}</p>
          <p class="time">{{positionData.release_date}} 发布于绵阳人才市场</p>
        </div>
      </el-col>
      <el-col :span="6" v-if="userType!=='1'">
        <p class="deliver" @click="Determination">投简历</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="15" :offset="2">
        <div class="position-content">
          <p>招聘信息：</p>
          <div class="content-item">
            <span><i class="fa fa-user" aria-hidden="true"></i>&nbsp;招聘人数：{{positionData.recruits_count}}</span>
            <span><i class="fa fa-bars" aria-hidden="true"></i>&nbsp;招聘类型：{{formatterType(positionData)}}</span>
            <span><i class="fa fa-phone" aria-hidden="true"></i>&nbsp;联系电话：{{positionData.tel}}</span>
            <span><i class="fa fa-id-card-o" aria-hidden="true"></i>&nbsp联系人：{{positionData.contact_person}}</span>
          </div>
          <p>职位诱惑：</p>
          <div class="content-item">{{positionData.welfare}}</div>
          <p>职位描述：</p>
          <div v-html="positionData.position_description" class="content-item"></div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="company-content">
          <div class="company-logo">
            <ShowImageCard :url="url" :config="config"></ShowImageCard>
            <p>{{positionData.company_name}}</p>
          </div>
          <p>
            <i class="fa fa-th-large iconstyle"></i>
            {{companyData.company_type}}
          </p>
          <p>
            <i class="fa fa-user-o iconstyle"></i>
            {{companyData.company_size}}
          </p>
          <p>
            <a :href="`mailto:${companyData.email}`" target="_blank"><i class="fa fa-envelope-o iconstyle"></i>
              {{companyData.email}}</a>
          </p>
          <p>
            <a :href="companyData.company_website" target="_blank"><i class="fa fa-university iconstyle"></i>
              {{companyData.company_website}}</a>
          </p>
        </div>
      </el-col>
    </el-row>
    <el-Dialog :visible.sync="dialogVisible" size="tiny">
      <UserEntryDialog @entryReturn="beLogin"></UserEntryDialog>
    </el-Dialog>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { changeSalaryStyle } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import UserEntryDialog from '@/components/userLogin/UserEntryDialog'
  import ShowImageCard from '@/components/common/ShowImageCard'
  import Data from '../../assets/file/searchJob.json'

  export default {
    name: 'PositionInfo',
    data () {
      return {
        userType: '',
        jobId: '',
        resumeId: '',
        companyId: '',
        positionData: {},
        companyData: {},
        dialogVisible: false,
        config: {
          height: '120px',
          width: '120px'
        },
        url: undefined
      }
    },
    created () {
      this.jobId = this.$route.params.id
      this.userType = this.$store.state.user_type
      this.getPositionDetail()
      this.getResumeId()
    },
    methods: {
      getPositionDetail () {
        let _this = this
        let params = new Object()
        params.id = _this.jobId
        postDataToServer('HM_COMPANY_JOB_GET', params).then((data) => {
          if (data.status === 0) {
            _this.positionData = changeSalaryStyle(data.data_list)
            _this.companyId = data.data_list.company_id
            _this.getCompanyDetail(data.data_list.company_id)
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      getCompanyDetail (id) {
        let _this = this
        let params = new Object()
        params.company_id = _this.companyId
        postDataToServer('COMPANY_GET', params).then((data) => {
          if (data.status === 0) {
            _this.companyData = data.data_list
            _this.companyData.company_size = getStaticMapList('company_size', _this.companyData.company_size)
            _this.companyData.company_type = getStaticMapList('company_type', _this.companyData.company_type)
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      formatterendEdu (row, column) {
        return getStaticMapList('education', row.academic_requirements)
      },
      forworkExperience (row, column) {
        return getStaticMapList('work_experience', row.work_experience)
      },
      formatterType (row, column) {
        return getStaticMapList('recruitment_type', row.recruitment_type)
      },
      //获取投递简历ID
      getResumeId () {
        let _this = this
        postDataToServer('HM_RESUME_LISTALL').then((data) => {
          if (data.status === 0) {
            data.data_list.forEach((e) => {
              if (e.is_delivery === 0) {
                _this.resumeId = e.resume_id
              }
            })
          }
        })
      },
      //查看必填信息是否填写
      Determination () {
        let _this = this
        if (_this.$store.state.real_name === '') {
          _this.dialogVisible = true
          return
        }
        if (_this.resumeId === '') {
          this.$message({
            message: '你还未设置默认简历',
            type: 'warning'
          })
          return
        }
        let params = new Object()
        params.resume_id = _this.resumeId
        postDataToServer('HM_RESUME_GET', params).then((data) => {
          if (data.status === 0) {
            let m = data.data_list.education_list.length
            let n = data.data_list.objective_list.length
            if (n !== 0 && m !== 0) {
              _this.DeliverResume()
            } else {
              this.$message({
                message: '您有必填项未填写无法投递',
                type: 'warning'
              })
            }
          }
        })
      },
      //投递简历
      DeliverResume () {
        let _this = this
        let params = new Object()
        params.resume_id = _this.resumeId
        params.job_id = _this.jobId
        params.company_id = _this.companyId
        postDataToServer('HM_RESUME_DELIVERY_ADD', params).then((data) => {
          if (data.status === 0) {
            this.$message({
              message: '投递成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: data.message,
              type: 'warning'
            })
          }
        })
      },
      beLogin (state) {
        if (state === true) {
          this.dialogVisible = false
          this.$router.go(0)
        }
      }
    },
    components: {
      UserEntryDialog,
      ShowImageCard
    }
  }
</script>
<style scoped>
  .Breadcrumb {
    position: relative;
    top: -1em;
    left: 0;
    margin-bottom: 1em;
  }

  a {
    color: #333;
    text-decoration: none;
  }

  a:hover {
    color: #20A0FF;
  }

  /*岗位头部信息样式*/
  .Title {
    padding: 2em 0em 1em;
    background: #EBF0EF;
  }

  .position-name h1 {
    margin-bottom: 0.5em;
  }

  .position-name p {
    margin: 0.3em;
  }

  .position-name span {
    color: red;
    margin-right: 1em;
  }

  .position-name .address {
    margin: 1em 0em;
    padding-left: 10px;
  }

  .position-name .time {
    font-size: 16px;
    color: #999999;
    font-weight: 300;
  }

  .deliver {
    width: 3em;
    padding: 1em 2em;
    margin-top: 2em;
    background: #20A0FF;
    color: #ffffff;
    float: right;
    border: 1px solid #20A0FF;
    border-radius: 5px;
    cursor: pointer;
  }

  /*岗位详细信息样式*/
  .position-content {
    padding: 1em 2em 3em;
    border-right: 1px solid #ccc;
    /*box-shadow: 2px 2px 10px #cccccc;*/
  }

  .position-content p {
    font-weight: bold;
    margin: 20px 10px 20px;
    color: #000;
  }

  .content-item {
    padding-left: 10px;
    text-indent: 1em;
    margin-bottom: 3em;
    color: #7C7C7C;
  }

  /*侧边公司信息样式*/
  .company-content {
    padding-top: 1em;
    padding-left: 1em;
    float: left;
  }

  .company-logo {
    width: 100%;
    margin-bottom: 2em;
    text-align: center;
    cursor: pointer;
  }

  .company-logo img {
    height: 120px;
    width: 100px;
    border: 1px solid #ccc;
    cursor: pointer;
  }

  .company-logo p {
    font-size: medium;
    color: #20A0FF;
    padding-bottom: 1em;
    text-align: center;
  }

  .company-content p {
    margin: 1.2em 0em 1.3em 1em;
  }

  .iconstyle {
    color: #666666;
    margin-right: 1.5em;
  }

  /*点击投递鼠标样式变化*/
  .deliver:hover {
    cursor: pointer;
  }
</style>
